<template>
  <div>
    <el-dialog title="新增返利" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="120px" class="form">
        <el-form-item label="员工手机号" class="input" labelWidth="200px">
          <el-col :span="16">
            <el-input v-model="form.visitorPhoneNum"></el-input>
          </el-col>
          <el-col :span="8" style="padding-left: 10px">
            <el-button type="primary" @click="getVisitorInfo">确 定</el-button>
          </el-col>
        </el-form-item>
        <el-form-item label="员工姓名" class="input"  labelWidth="200px">
          <el-col :span="16">
            <el-input v-model="form.visitorRealName" ></el-input>
          </el-col>
          <el-col :span="8" style="padding-left: 10px"></el-col>
        </el-form-item>
        <el-form-item label="初始化密码" class="input"  labelWidth="200px">
          <el-col :span="16">
            <el-input v-model="form.password" ></el-input>
          </el-col>
          <el-col :span="8" style="padding-left: 10px"></el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { userGetByPhoneNum } from 'api/account'
  import { visitorAdd } from 'api/visitorManager'
  // import { rules } from './config'
  import { api } from 'api/common'
  export default {
    data() {
      return {
        dialogFormVisible: true,
        uploadConfig: {
          url: api.postUploadImg
        },
        limit: 1,
        readonly: '',
        form: {
          userId: '',
          visitorPhoneNum: '',
          visitorRealName: '',
          password: ''
        },
        dialogImageUrl: '',
        dialogVisible: false
        // rules: rules
      }
    },
    computed: {
      route() {
        return this.$route
      }
    },
    created() {
      if (sessionStorage.getItem('config_companyId')) {
        this.getPartnerInfo()
      }
      console.log('in create method')
      if (sessionStorage.getItem('config_readonly') === 'read') {
        console.log('只读')
        this.readonly = true
      } else if (sessionStorage.getItem('config_readonly') === 'update') {
        this.readonly = false
        console.log('=修改')
      }
      console.log('created this.from.isTest = ' + this.form.isTest)
    },
    methods: {
      async getVisitorInfo() {
        try {
          console.log('will get info visitorPhoneNum = ' + this.form.visitorPhoneNum)
          let back = await userGetByPhoneNum(this.form.visitorPhoneNum)
          back = back.data
          if (back.resultCode === '200') {
            this.form.userId = back.result.userId
            this.form.visitorPhoneNum = back.result.phoneNum
            this.form.visitorRealName = back.result.realName
          } else {
            this.$alert('该用户不存在')
          }
        } catch (err) {
          this.$alert('请求出错', '提示')
        }
      },
      toNext(parm) {
        this.submit('next')
      },
      save() {
        this.submit('save')
      },
      close() {
        this.$emit('close')
      },
      submit(type) {
        this.$refs['form'].validate(async(valid) => {
          if (valid) {
            try {
              let back = await visitorAdd(this.form)
              back = back.data
              if (back.resultCode === '200') {
                this.$alert('保存成功', '提示')
                this.close()
              } else {
                this.$alert('出错了：' + back.msg, '提示')
              }
            } catch (err) {
              this.$alert('请求出错', '提示')
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  #basicInfo {
    .form {
      width: 100%;
      overflow: hidden;
      margin-top: 30px;
      .profit {
        float: left;
        width: 100px;
        text-align: center;
      }
    }
    .buttonBox {
      overflow: hidden;

      .button {
        float: left;
        width: 200px;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        margin: 40px;
        color: white;
        background: #409EFF;
        text-align: center;
        cursor: pointer;
      }
    }
    .input {
      float: left;
      width: 45%;
      .investor {
        width: 50%;
        margin-right: 10px;
      }
      .icon {
        width: 30px;
        text-align: center;
        float: left;
      }
      .spanPercent {
        width: 16px;
        text-align: left;
        float: left;
      }
    }
  }

  .logoBox {
    width: 80px;;
    height: 80px;
    margin-left: 30px;
    img {
      width: 100%;
    }
  }
</style>
